// Perfect Scrollbar - 滚动条
// https://github.com/mdbootstrap/perfect-scrollbar

// 滚动条颜色
$e-scroll-color: darken(#ebedf2, 20%) !default;
// 自定义滚动条(Perfect Scrollbar) size
$e-scroll-size: 8px !default;


.e-scroll {
    position: relative;
    overflow: hidden;

    &.e-scroll--pull
    {
        padding-right: 12px;
        margin-left: -12px;
    }
}

// 尺寸
.ps {
    > .ps__rail-y {
        width: $e-scroll-size;

        &:hover,
        &:focus {
            width: $e-scroll-size;
        }

        > .ps__thumb-y {
            width: $e-scroll-size;
            &:hover,
            &:focus {
                width: $e-scroll-size;
            }
        }
    }

    > .ps__rail-x {
        height: $e-scroll-size;
        &:hover,
        &:focus {
            height: $e-scroll-size;
        }
        > .ps__thumb-x {
            top: 0;
            height: $e-scroll-size;
            &:hover,
            &:focus {
                top: 0;
                height: $e-scroll-size;
            }
        }
    }

    // 皮肤
    > .ps__rail-x, > .ps__rail-y {
        background: transparent;

        &:hover,
        &:focus {
            opacity: 1;
            background: transparent;

            > .ps__thumb-x, > .ps__thumb-y {
                opacity: 1;
            }
        }

        > .ps__thumb-x, > .ps__thumb-y {
            border-radius: $e-border-radius;
            @include e-not-rounded {
                border-radius: 0;
            }
            background: $e-scroll-color;
            opacity: 1;


            &:hover,
            &:focus {
                opacity: 1;
                background: $e-scroll-color;
            }
        }
    }
}
